<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
        三个步骤：
            1. 定义组件
                Vue.extend
            2. 注册组件
                - 全局注册：Vue.component(组件名称, 第一步中定义的组件)
            3. 使用组件
                将第二步中的组件名称，拿到页面中当成自定义标签使用即可。
     -->
    <div id="app">
      <h1>{{ msg }}</h1>

      <xxx></xxx>

      <xxx></xxx>

      <xxx></xxx>

      <xxx></xxx>
    </div>

    <script src="./js/vue.js"></script>
    <script>
      // 1定义组件
      const person = Vue.extend({
        // options 配置项，跟你 new Vue 时一样，除了 el

        // data选项必须是一个函数返回对象的形式
        // data: {
        //   name: "张三",
        // },

        data() {
          return {
            name: "张三",
          };
        },

        // template 选项，（必须要有）指定这个组件在使用时，页面渲染的模板内容
        template: `
            <div>
                <h2>姓名：{{ name }}</h2>    
            </div>
        `,
      });

      //   2. 注册
      Vue.component("xxx", person);

      const app = new Vue({
        el: "#app",

        data: {
          msg: "hello",
        },
      });
    </script>
  </body>
</html>
